<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钵仔糕音乐</title>
    <link rel="stylesheet" href="./网易云音乐.css">
</head>

<body>
    <header class="header">
        <div class="bigMenu">
            <div class="box">
                <div class="logo"></div>
                <div>
                    <ul id="bigUl">
                        <li class="sel">发现音乐</li>
                        <li>我的音乐</li>
                        <li>关注</li>
                        <li>商城</li>
                        <li>音乐人</li>
                        <li>下载客户端</li>
                    </ul>
                </div>
                <div>
                    <div class="search">
                        <label for="male">音乐/视频/电台/用户</label>
                        <input type="text" id="male">
                    </div>
                </div>
                <div class="btn">创作者中心</div>
                <div class="login">登录</div>
                <div class="three"></div>
            </div>
        </div>
        <div class="smallMenu">
            <div class="box">
                <ul id="small">
                    <li><span class="liBg selLi">推荐</span></li>
                    <li><span class="liBg">排行榜</span></li>
                    <li><span class="liBg">歌单</span></li>
                    <li><span class="liBg">主播电台</span></li>
                    <li><span class="liBg">歌手</span></li>
                    <li><span class="liBg">新碟上线</span></li>
                </ul>
            </div>
        </div>
    </header>

    <div class="rotation-body">
        <div class="rotation-left"></div>
        <div class="rotation">
            <img src="./imgs/lb1.jpg" alt="">
        </div>
        <div class="rotation-right"></div>
    </div>



    <div class="main-body">
        <div class="main">
            <div class="left">
                <div class="cardOne">
                    <div class="title1">
                        热门推荐
                    </div>
                    <div class="more">
                        更多
                        <i class="moreLogo"> </i>
                    </div>
                    <ul>
                        <li><a href="#">华语</a></li>
                        <li><a href="#">流行</a></li>
                        <li><a href="#">摇滚</a></li>
                        <li><a href="#">民谣</a></li>
                        <li><a href="#">电子</a></li>
                    </ul>
                    <div class="line"></div>
                    <div class="cardContent">
                        <div class="mCard">
                            <div class="mImg">
                                <img src="./imgs/109951163017978367.jpg" alt="">
                                <div class="daohang">
                                    <span class="erji"></span>
                                    <span class="number">584万</span>
                                    <div class="play"></div>
                                </div>
                            </div>
                            <p>『物哀纯音』漫天飞舞的红叶，暮色黄昏</p>
                        </div>
                        <div class="mCard">
                            <div class="mImg">
                                <img src="./imgs/2.jpg" alt="">
                                <div class="daohang">
                                    <span class="erji"></span>
                                    <span class="number">271万</span>
                                    <div class="play"></div>
                                </div>
                            </div>
                            <p>「Smooth Jazz」柔顺爵士，都市悠闲</p>
                        </div>
                        <div class="mCard">
                            <div class="mImg">
                                <img src="./imgs/3.jpg" alt="">
                                <div class="daohang">
                                    <span class="erji"></span>
                                    <span class="number">431万</span>
                                    <div class="play"></div>
                                </div>
                            </div>
                            <p>『凯尔特民谣』来自西欧风情的悠扬之音</p>
                        </div>
                        <div class="mCard">
                            <div class="mImg">
                                <img src="./imgs/4.jpg" alt="">
                                <div class="daohang">
                                    <span class="erji"></span>
                                    <span class="number">5000</span>
                                    <div class="play"></div>
                                </div>
                            </div>
                            <p><i class="dtjm"></i>庞宽-03：我最想合作的音乐人</p>
                        </div>
                        <div class="mCard">
                            <div class="mImg">
                                <img src="./imgs/5.jpg" alt="">
                                <div class="daohang">
                                    <span class="erji"></span>
                                    <span class="number">684万</span>
                                    <div class="play"></div>
                                </div>
                            </div>
                            <p>欧美·中国风 I 西方节奏里绮丽的东方乐韵</p>
                        </div>
                        <div class="mCard">
                            <div class="mImg">
                                <img src="./imgs/6.jpg" alt="">
                                <div class="daohang">
                                    <span class="erji"></span>
                                    <span class="number">33749</span>
                                    <div class="play"></div>
                                </div>
                            </div>
                            <p><i class="dtjm"></i>第001集 定了一门亲事</p>
                        </div>
                        <div class="mCard">
                            <div class="mImg">
                                <img src="./imgs/7.jpg" alt="">
                                <div class="daohang">
                                    <span class="erji"></span>
                                    <span class="number">19万</span>
                                    <div class="play"></div>
                                </div>
                            </div>
                            <p>慵懒与摇摆 Ι 霓虹和风下的Bossa Nova</p>
                        </div>
                        <div class="mCard">
                            <div class="mImg">
                                <img src="./imgs/8.jpg" alt="">
                                <div class="daohang">
                                    <span class="erji"></span>
                                    <span class="number">24万</span>
                                    <div class="play"></div>
                                </div>
                            </div>
                            <p><i class="dtjm"></i>吴油油终极私人订制</p>
                        </div>
                    </div>
                </div>


                <div class="cardOne">
                    <div class="tb-1">
                        <div class="title1">
                            新碟上线
                        </div>
                        <div class="more">
                            更多
                            <i class="moreLogo"> </i>
                        </div>
                    </div>
                    <div class="disk">
                        <div class="disk-left"></div>
                        <div class="disk-right"></div>
                        <div class="disk-c">
                            <div class="disk-d">
                                <img src="./pngs/look.jpg" alt="">
                                <div class="disk-play"></div>
                            </div>
                            <div class="disk-name">
                                LOOK AT ME: THE ALBUM.
                            </div>
                            <div class="disk-songer">
                                XXXTENTACION
                            </div>
                        </div>
                        <div class="disk-c">
                            <div class="disk-d">
                                <img src="./pngs/ke.jpg" alt="">
                                <div class="disk-play"></div>
                            </div>
                            <div class="disk-name">
                                可
                            </div>
                            <div class="disk-songer">
                                薛之谦/张靓颖
                            </div>
                        </div>
                        <div class="disk-c">
                            <div class="disk-d">
                                <img src="./pngs/hikaru.jpg" alt="">
                                <div class="disk-play"></div>
                            </div>
                            <div class="disk-name">
                                Hikaru Utada Live Sessions from Air Studios
                            </div>
                            <div class="disk-songer">
                                宇多田ヒカル
                            </div>
                        </div>
                        <div class="disk-c">
                            <div class="disk-d">
                                <img src="./pngs/zzza.jpg" alt="">
                                <div class="disk-play"></div>
                            </div>
                            <div class="disk-name">
                                自作自爱
                            </div>
                            <div class="disk-songer">
                                容祖儿
                            </div>
                        </div>
                        <div class="disk-c">
                            <div class="disk-d">
                                <img src="./pngs/zmx.jpg" alt="">
                                <div class="disk-play"></div>
                            </div>
                            <div class="disk-name">
                                准明星
                            </div>
                            <div class="disk-songer">
                                徐佳莹
                            </div>
                        </div>
                    </div>
                </div>

                <div class="cardOne mgt-38">
                    <div class="tb-1">
                        <div class="title1">
                            榜单
                        </div>
                        <div class="more">
                            更多
                            <i class="moreLogo"> </i>
                        </div>
                    </div>
                    <div class="lastCard">
                        <div class="ranking">
                            <div class="ranking-head">
                                <img src="./pngs/bsb.jpg" alt="">
                                <div class="mrl-10">
                                    <p class="rank-name">飙升榜</p>
                                    <div class="icons">
                                        <div class="icons-play"></div>
                                        <div class="icons-file mrl-10"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left changeColor">1</div>
                                <div class="body-right">
                                    <span>不再需要你</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left changeColor">2</div>
                                <div class="body-right">
                                    <span>小城夏天</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left changeColor">3</div>
                                <div class="body-right">
                                    <span>耿</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">4</div>
                                <div class="body-right">
                                    <span>The King and I (From the Original Motion Picture Soundtrack ELVIS)</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">5</div>
                                <div class="body-right">
                                    <span>忘记时间</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">6</div>
                                <div class="body-right">
                                    <span>Adventure Time</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">7</div>
                                <div class="body-right">
                                    <span>也许是你拯救了我</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">8</div>
                                <div class="body-right">
                                    <span>Attention (with Justin Bieber) [Disclosure Remix]</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">9</div>
                                <div class="body-right">
                                    <span>拿捏 Kill it ft.Thomeboydontkill/Psy.P</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">10</div>
                                <div class="body-right">
                                    <span>账号已注销</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="checkMore">查看全部 ></div>
                        </div>


                        
                        <div class="ranking">
                            <div class="ranking-head">
                                <img src="./pngs/xgb.jpg" alt="">
                                <div class="mrl-10">
                                    <p class="rank-name">新歌榜</p>
                                    <div class="icons">
                                        <div class="icons-play"></div>
                                        <div class="icons-file mrl-10"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left changeColor">1</div>
                                <div class="body-right">
                                    <span>不再需要你</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left changeColor">2</div>
                                <div class="body-right">
                                    <span>小城夏天</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left changeColor">3</div>
                                <div class="body-right">
                                    <span>耿</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">4</div>
                                <div class="body-right">
                                    <span>The King and I (From the Original Motion Picture Soundtrack ELVIS)</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">5</div>
                                <div class="body-right">
                                    <span>忘记时间</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">6</div>
                                <div class="body-right">
                                    <span>Adventure Time</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">7</div>
                                <div class="body-right">
                                    <span>也许是你拯救了我</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">8</div>
                                <div class="body-right">
                                    <span>Attention (with Justin Bieber) [Disclosure Remix]</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">9</div>
                                <div class="body-right">
                                    <span>拿捏 Kill it ft.Thomeboydontkill/Psy.P</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">10</div>
                                <div class="body-right">
                                    <span>账号已注销</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="checkMore">查看全部 ></div>
                        </div>

                        
                        <div class="ranking">
                            <div class="ranking-head">
                                <img src="./pngs/ycb.jpg" alt="">
                                <div class="mrl-10">
                                    <p class="rank-name">原创榜</p>
                                    <div class="icons">
                                        <div class="icons-play"></div>
                                        <div class="icons-file mrl-10"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left changeColor">1</div>
                                <div class="body-right">
                                    <span>不再需要你</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left changeColor">2</div>
                                <div class="body-right">
                                    <span>小城夏天</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left changeColor">3</div>
                                <div class="body-right">
                                    <span>耿</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">4</div>
                                <div class="body-right">
                                    <span>The King and I (From the Original Motion Picture Soundtrack ELVIS)</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">5</div>
                                <div class="body-right">
                                    <span>忘记时间</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">6</div>
                                <div class="body-right">
                                    <span>Adventure Time</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">7</div>
                                <div class="body-right">
                                    <span>也许是你拯救了我</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">8</div>
                                <div class="body-right">
                                    <span>Attention (with Justin Bieber) [Disclosure Remix]</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">9</div>
                                <div class="body-right">
                                    <span>拿捏 Kill it ft.Thomeboydontkill/Psy.P</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ranking-body">
                                <div class="body-left">10</div>
                                <div class="body-right">
                                    <span>账号已注销</span>
                                    <div class="control">
                                        <div class="c-one"></div>
                                        <div class="c-two"></div>
                                        <div class="c-thr"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="checkMore">查看全部 ></div>
                        </div>

                    </div>
                </div>

                

            </div>
            <div class="right">
                <div class="oneCard">
                    <p style="line-height: 20px;">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <div class="loginBtn">用户登录</div>
                </div>
                <div class="twoCard">
                    <div class="card-head">
                        <div class="songer">入驻歌手</div>
                        <div class="all">查看全部 ></div>
                    </div>
                    <div class="card-main">
                        <div class="songer-card">
                            <img src="./imgs/zhm.jpg" alt="">
                            <div class="songer-list">
                                <div class="songer-name">
                                    <h4>张惠妹aMEI</h4>
                                </div>
                                <div class="songer-con">台湾歌手张惠妹</div>
                            </div>
                        </div>
                        <div class="songer-card mgt-15">
                            <img src="./imgs/wmc.jpg" alt="">
                            <div class="songer-list">
                                <div class="songer-name">
                                    <h4>吴莫愁Momo</h4>
                                </div>
                                <div class="songer-con">《中国好声音》选手</div>
                            </div>
                        </div>
                        <div class="songer-card mgt-15">
                            <img src="./imgs/sn.jpg" alt="">
                            <div class="songer-list">
                                <div class="songer-name">
                                    <h4>孙楠</h4>
                                </div>
                                <div class="songer-con">歌手孙楠 代表作《不知道》</div>
                            </div>
                        </div>
                        <div class="songer-card mgt-15">
                            <img src="./imgs/mtll.jpg" alt="">
                            <div class="songer-list">
                                <div class="songer-name">
                                    <h4>麦田老狼</h4>
                                </div>
                                <div class="songer-con">歌手，音乐人。代表作《还是不知道》</div>
                            </div>
                        </div>
                        <div class="songer-card mgt-15">
                            <img src="./imgs/ccs.jpg" alt="">
                            <div class="songer-list">
                                <div class="songer-name">
                                    <h4>陈楚生</h4>
                                </div>
                                <div class="songer-con">唱作歌手</div>
                            </div>
                        </div>
                    </div>
                    <div class="join">
                        <p>申请成为网易音乐人</p>
                    </div>
                </div>
                <div class="thr-card">
                    <div class="hot">
                        热门主播
                    </div>
                    <div class="idoi">
                        <img src="./imgs/cl.jpg" alt="">
                        <div class="idoi-list">
                            <div class="idoi-name">陈立</div>
                            <div class="idoi-con">心理学家、美食家陈立教授</div>
                        </div>
                    </div>
                    <div class="idoi mgt-15">
                        <img src="./imgs/lw.jpg" alt="">
                        <div class="idoi-list">
                            <div class="idoi-name">刘维-Julius</div>
                            <div class="idoi-con">歌手、播客节目《维维道来》</div>
                        </div>
                    </div>
                    <div class="idoi mgt-15">
                        <img src="./imgs/mfdl.jpg" alt="">
                        <div class="idoi-list">
                            <div class="idoi-name">莫非定律MoreFeel</div>
                            <div class="idoi-con">男女双人全创作独立乐团</div>
                        </div>
                    </div>
                    <div class="idoi mgt-15">
                        <img src="./imgs/xmd.jpg" alt="">
                        <div class="idoi-list">
                            <div class="idoi-name">碎嘴许美达</div>
                            <div class="idoi-con">脱口秀网络红人</div>
                        </div>
                    </div>
                    <div class="idoi mgt-15">
                        <img src="./imgs/yl.jpg" alt="">
                        <div class="idoi-list">
                            <div class="idoi-name">银临Rachel</div>
                            <div class="idoi-con"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="footer-content">
            <p>2022/6/19提交</p>
            <p>网易云音乐练习结束</p>
            <p>还原度80%</p>
        </div>
    </div>


    <!-- 回到顶部 -->
    <div id="top" class="top"></div>
</body>
<script src="./网易云音乐.js"></script>
<script src="./轮播图.js"></script>

</html>